<template>
	<view>
		<view class="head">
			<image @click="fanhui" :style="{ top: safeTop }" class="fanhui-img" src="../../static/index/fanhuib.png" mode=""></image>
			<view class="head-name" :style="[{ paddingTop: safeTop }, { height: menuH }, { lineHeight: menuH }]">会员充值</view>
		</view>

		<view class="box">
			<view class="title">店铺名·24H自助台球(红旗路店)</view>

			<view class="selectionTime-box">
				<view class="selectionTime">
					<view class="time-title z-margin-b-8">请选择定时时长</view>

					<view class="time-list">
						<view
							@click="(currentTime = index), (hour = index + 1)"
							:class="currentTime == index ? 'vctivate-time-each' : ''"
							class="time-each z-margin-t-24"
							v-for="(item, index) in 6"
						>
							<view class="sum">
								￥
								<text>200</text>
							</view>
							<view class="give">送40元</view>
						</view>
					</view>
				</view>
				<view class="hint">
					<view class="hint-title">
						<image src="../../static/index/hint.png" mode=""></image>
						定时开台为预付款，提前结束不退费
					</view>
					<view class="hint-detail">充值即可享受平台的充值赠送活动，故充值本金原则上不能提现，只可用于平台消费。若出现特殊情况，如门店倒闭导致无法消费，则可联系商家要求退还剩余未消费充值本金； 畅打卡仅限在规定时段内免费打球使用，到截止时间点将自动关台； 畅打卡仅限本人使用，仅支持室内台球畅玩，不支持街头室外共享台球和棋牌包间场景。</view>
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<view class="btn">立即充值</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			menuH: uni.getStorageSync('menuH') || '',
			safeTop: uni.getStorageSync('safeTop') || 20 + 'px',
			currentTime: 0
		};
	},
	methods: {
		fanhui(){
			uni.navigateBack()
		}
	}
};
</script>

<style lang="scss">
.head {
	width: 750rpx;
	height: 200rpx;
	background: linear-gradient(to bottom, #e6f6f2, #ddf0f5, #f6f7fa);
	position: relative;
	.fanhui-img {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		margin-left: 32rpx;
	}
	.head-name {
		font-weight: bold;
		font-size: 34rpx;
		color: #203460;
		text-align: center;
	}
}

.box {
	width: 750rpx;
	background: #ffffff;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	position: relative;
	top: -40rpx;
	padding: 40rpx 32rpx;
	.title {
		font-weight: bold;
		font-size: 40rpx;
		color: #1c274c;
	}

	.selectionTime-box {
		width: 686rpx;
		margin-top: 24rpx;

		.selectionTime {
			padding: 40rpx 24rpx 24rpx 24rpx;
			background: #f7f8fa;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			position: relative;
			z-index: 1;
			.time-title {
				font-weight: bold;
				font-size: 30rpx;
				color: #1c274c;
				text-align: center;
			}
			.time-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.time-each {
					width: 197rpx;
					// height: 166rpx;
					background: #ffffff;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					text-align: center;
					padding: 28rpx 0;
					.sum {
						font-weight: 500;
						font-size: 24rpx;
						color: #4bc264;
						text {
							font-size: 56rpx;
							font-weight: bold;
						}
					}
					.give {
						font-weight: 500;
						font-size: 24rpx;
						color: #a4a9b7;
					}
				}
				.vctivate-time-each {
					background-color: #4bc264;
					.sum {
						color: #ffffff;
					}
					.give {
						color: #b4e6be;
					}
				}
			}
		}
		.hint {
			background-color: #eaebee;
			border-radius: 0 0 24rpx 24rpx;
			position: relative;
			top: -24rpx;
			.hint-title {
				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 14rpx;
					// position: relative;
					// top: 48rpx;
				}
				display: flex;
				// line-height: 120rpx;
				position: relative;
				top: 54rpx;
				padding: 0 30rpx;
				
				font-weight: bold;
				font-size: 22rpx;
				color: #6b738b;
			}
			.hint-detail {
				font-weight: 500;
				font-size: 22rpx;
				color: #A4A9B7;
				line-height: 36rpx;
				padding: 62rpx 32rpx 32rpx 32rpx;
			}
		}
	}
}


.btn-box {
	width: 100%;
	position: absolute;
	bottom: 0rpx;
	left: 50%;
	transform: translate(-50%,-50%);
	.btn {
		width: 686rpx;
		height: 106rpx;
		background: #4BC264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		font-weight: 800;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 106rpx;
		text-align: center;
	}
}
</style>
